<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
	<title></title>
	<!-- head 中 -->
<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/0.4.3/weui.min.css">
	<style type="text/css">
		.my_h{
			height: 120px;
		}
	</style>
</head>
<body>
<div class="hd" style="text-align: center; padding: 10px 0;">
    <h1 class="page_title">WeUI</h1>
    <p class="page_desc">为微信Web服务量身设计</p>
</div>
<div class="bd">
    <div class="weui_grids">
        <a href="http://www.baidu.com" class="weui_grid my_h">
            <div class="weui_grid_icon">
            </div>
            <p class="weui_grid_label">
                测试
            </p>
        </a>
        <a href="#/cell" class="weui_grid my_h">
            <div class="weui_grid_icon">
                <i class="icon icon_cell"></i>
            </div>
            <p class="weui_grid_label">
                Cell
            </p>
        </a>
        <a href="#/toast" class="weui_grid my_h">
            <div class="weui_grid_icon">
                <i class="icon icon_toast"></i>
            </div>
            <p class="weui_grid_label">
                Toast
            </p>
        </a>
        <a href="javascript:openDialog();" class="weui_grid my_h">
            <div class="weui_grid_icon">
                <i class="icon icon_dialog"></i>
            </div>
            <p class="weui_grid_label">
                显示对话框Dialog
            </p>
        </a>
        <a href="#/progress" class="weui_grid my_h">
            <div class="weui_grid_icon">
                <i class="icon icon_progress"></i>
            </div>
            <p class="weui_grid_label">
                Progress
            </p>
        </a>
        <a href="#/msg" class="weui_grid my_h">
            <div class="weui_grid_icon">
                <i class="icon icon_msg"></i>
            </div>
            <p class="weui_grid_label">
                Msg
            </p>
        </a>
        <a href="#/article" class="weui_grid my_h">
            <div class="weui_grid_icon">
                <i class="icon icon_article"></i>
            </div>
            <p class="weui_grid_label">
                Article
            </p>
        </a>
        <a href="#/actionsheet" class="weui_grid my_h">
            <div class="weui_grid_icon">
                <i class="icon icon_actionSheet"></i>
            </div>
            <p class="weui_grid_label">
                ActionSheet
            </p>
        </a>
        <a href="#/icons" class="weui_grid my_h">
            <div class="weui_grid_icon">
                <i class="icon icon_icons"></i>
            </div>
            <p class="weui_grid_label">
                Icons
            </p>
        </a>
        <a href="#/panel" class="weui_grid my_h">
            <div class="weui_grid_icon">
                <i class="icon icon_panel"></i>
            </div>
            <p class="weui_grid_label">
                Panel
            </p>
        </a>
        <a href="#/tab" class="weui_grid my_h">
            <div class="weui_grid_icon">
                <i class="icon icon_tab"></i>
            </div>
            <p class="weui_grid_label">
                Tab
            </p>
        </a>
        <a href="#/searchbar" class="weui_grid my_h">
            <div class="weui_grid_icon">
                <i class="icon icon_search_bar"></i>
            </div>
            <p class="weui_grid_label">
                SearchBar
            </p>
        </a>
    </div>
</div>

<!--BEGIN dialog1-->
<div class="weui_dialog_confirm" id="dialog1" style="padding: 0;" >
    <div class="weui_mask"></div>
    <div class="weui_dialog">
        <div class="weui_dialog_hd" style="border-bottom: 1px solid #ccc;"><strong class="weui_dialog_title">注册</strong></div>
        <div class="weui_dialog_bd">
		<div class="weui_cells weui_cells_form">
			<div class="weui_cell">
				<div class="weui_cell_hd"><label class="weui_label">姓名</label></div>
				<div class="weui_cell_bd weui_cell_primary">
					<input class="weui_input" type="tel" placeholder="请输入姓名">
				</div>
			</div>
			<div class="weui_cell weui_vcode weui_cell_warn">
				<div class="weui_cell_hd"><label class="weui_label">验证码</label></div>
				<div class="weui_cell_bd weui_cell_primary">
					<input id='code' class="weui_input" type="number" placeholder="请输入验证码">
				</div>
				<div class="weui_cell_ft">
					<img src="res/img/vcode.jpg">
				</div>
			</div>
		</div>
		<div class="weui_cells weui_cells_form">
			<div class="weui_cell weui_cell_warn">
				<div class="weui_cell_hd"><label class="weui_label">qq</label></div>
				<div class="weui_cell_bd weui_cell_primary">
					<input id='tel' class="weui_input" type="tel" placeholder="请输入qq号">
				</div>
			</div>
			<div class="weui_cell weui_vcode weui_cell_warn">
				<div class="weui_cell_hd"><label class="weui_label">验证码</label></div>
				<div class="weui_cell_bd weui_cell_primary">
					<input id='code' class="weui_input" type="number" placeholder="请输入验证码">
				</div>
				<div class="weui_cell_ft">
					<i class="weui_icon_warn"></i>
					<img src="images/vcode.jpg">
				</div>
			</div>
			<div class="weui_cells_tips">底部说明文字底部说明文字</div>
		</div>
        </div>
        <div class="weui_dialog_ft">
            <a href="javascript:Dialog.cancel();" id="btn_cancel" class="weui_btn_dialog default">取消</a>
            <a href="javascript:Dialog.sure();" id="btn_sure" class="weui_btn_dialog primary">确定</a>
        </div>
    </div>
</div>
<!--END dialog1-->

<!--BEGIN toast-->
<div id="toast" style="display: none;">
    <div class="weui_mask_transparent"></div>
    <div class="weui_toast">
        <i class="weui_icon_toast"></i>
        <p class="weui_toast_content">已完成</p>
    </div>
</div>
<!--end toast-->

</body>
<!-- body 最后 -->
<script src="res/js/zepto.min.js"></script>
<script type="text/javascript">

var Dialog = {
	cancel : function(){
		console.log("点击了取消");
		$(".weui_toast_content").text("点击了取消");
		$('#toast').show();
        setTimeout(function () {
            $('#toast').hide();
        }, 3000);
	},
	sure : function(){
		console.log("点击了确认");
		$(".weui_toast_content").text("点击了确认");
		$('#toast').show();
        setTimeout(function () {
            $('#toast').hide();
        }, 3000);
	}
};

function openDialog() {
	console.log($('#dialog1').attr("class"));
	$('#dialog1').show();
	/*
	$('#dialog1').show().on('click', '.weui_btn_dialog', function () {
		
        $('#dialog1').off('click').hide();
    });
    */
}
</script>
</html>